<template>
  <el-dialog title="" :visible.sync="message.visible" :fullscreen="true">
    <el-card style="width: 90vw; margin: auto">
      <keep-alive>
        <el-tabs
          v-model="message.title"
          style="margin: 10px 0; border: 1px solid #ededed"
          :lazy="true"
        >
          <el-tab-pane label="房间日志" name="log">
            <transition name="fade">
              <div v-show="message.title == 'log'">
                <StandardTable
                  ref="StandardTable"
                  :loading="loading"
                  :columns="columnsLog"
                  :datasource="message.tableDataLog"
                  :pagination="tableDataLog_pageinfo"
                  :onChange="onChange"
                  :onChangeSize="onChangeSize"
                >
                </StandardTable>
              </div>
            </transition>
          </el-tab-pane>
          <el-tab-pane label="收入统计" name="price">
            <transition name="fade">
              <div v-show="message.title == 'price'">
                <StandardTable
                  ref="StandardTable"
                  :loading="loading"
                  :columns="columnsPrice"
                  :paginationNum="[15]"
                  :datasource="message.tableDataPrice"
                  :pagination="tableDataPrice_pageinfo"
                  :onChange="onChange"
                  :onChangeSize="onChangeSize"
                >
                </StandardTable>
              </div>
            </transition>
          </el-tab-pane>
          <el-tab-pane label="打赏记录" name="reward">
            <transition name="fade">
              <div v-show="message.title == 'reward'">
                <StandardTable
                  ref="StandardTable"
                  :loading="loading"
                  :columns="columnsReward"
                  :datasource="message.tableDataReward"
                  :pagination="tableDataReward_pageinfo"
                  :onChange="onChange"
                  :onChangeSize="onChangeSize"
                >
                </StandardTable>
              </div>
            </transition>
          </el-tab-pane>
          <el-tab-pane label="封禁" name="banned">
            <transition name="fade">
              <div v-show="message.title == 'banned'">
                <StandardTable
                  ref="StandardTable"
                  :loading="loading"
                  :columns="columnsBanned"
                  :datasource="message.tableDataBanned"
                  :pagination="tableDataBanned_pageinfo"
                  :onChange="onChange"
                  :onChangeSize="onChangeSize"
                >
                </StandardTable>
              </div>
            </transition>
          </el-tab-pane>
        </el-tabs>
      </keep-alive>
    </el-card>

    <el-dialog title="分时统计" :visible.sync="flag" append-to-body>
      <el-table :data="gridData" v-loading="loadingTime">
        <el-table-column
          property="hour"
          label="日期"
          width="150"
        ></el-table-column>
        <el-table-column property="total" label="金额">
          <template slot-scope="scope">
            <span>{{ scope.row.total }}币</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </el-dialog>
</template>
<script>
import StandardTable from "@/components/StandardTable.vue";

export default {
  name: "LogDrawer",
  components: { StandardTable },
  props: {
    message: {
      require: true,
      type: Object,
    },
    messageRoomId: {
      require: true,
    },
    tableDataLog_pageinfo: {
      require: true,
    },
    tableDataPrice_pageinfo: {
      require: true,
    },
    tableDataReward_pageinfo: {
      require: true,
    },
    tableDataBanned_pageinfo: {
      require: true,
    },
  },
  data() {
    return {
      gridData: [],
      flag: false,
      loading: false,
      loadingTime: false,
      columnsLog: [
        { label: "信息", prop: "content" },
        { label: "日期", prop: "created_at" },
      ],
      tableDataLog: [],
      columnsPrice: [
        {
          label: "金额",
          prop: "total",
          render: (h, row) => {
            return <span>{row.row.total}币</span>;
          },
        },
        {
          label: "日期",
          prop: "day",
          render: (h, row) => {
            return (
              <el-button type="text">
                <span onClick={() => this.incomeStatistics(row.row)}>
                  {row.row.day}
                </span>
              </el-button>
            );
          },
        },
      ],
      tableDataPrice: [],
      columnsReward: [
        {
          label: "内容",
          prop: "message",
          render: (h, row) => {
            return (
              <div>
                <p>
                  {row.row.nickname}打赏了{row.row.rewarded_nickname}
                  {row.row.number}个{row.row.name}
                </p>
              </div>
            );
          },
        },
        {
          label: "日期",
          prop: "created_at",
        },
        {
          label: "礼物",
          prop: "static_url",
          render: (h, row) => {
            let srcList = [row.row.static_url];
            return (
              <div>
                {row.row.static_url ? (
                  <div class="demo-image__preview">
                    <el-image
                      style="width: 100px; height: 100px"
                      src={row.row.static_url}
                      preview-src-list={srcList}
                    ></el-image>
                  </div>
                ) : (
                  <el-button type="text">无内容</el-button>
                )}
              </div>
            );
          },
        },
      ],
      tableDataReward: [],
      columnsBanned: [
        {
          label: "内容",
          prop: "message",
          render: (h, row) => {
            return (
              <p>
                {row.row.op_nickname}封禁了{row.row.out_nickname}
              </p>
            );
          },
        },
        {
          label: "原因",
          prop: "reason",
          render: (h, row) => {
            return (
              <div>
                {row.row.reason ? (
                  <span>{row.row.reason}</span>
                ) : (
                  <el-button type="text">无内容</el-button>
                )}
              </div>
            );
          },
        },
        {
          label: "截图",
          prop: "screenshot",
          render: (h, row) => {
            let srcList = [row.row.screenshot];
            return (
              <div>
                {row.row.screenshot ? (
                  <div class="demo-image__preview">
                    <el-image
                      style="width: 100px; height: 100px"
                      src={row.row.screenshot}
                      preview-src-list={srcList}
                    ></el-image>
                  </div>
                ) : (
                  <el-button type="text">无内容</el-button>
                )}
              </div>
            );
          },
        },
        { label: "开始日期", prop: "created_at" },
        { label: "结束日期", prop: "expire_time" },
      ],
      tableDataBanned: [],
    };
  },
  beforeMount() {},
  mounted() {},
  methods: {
    onChange(page) {
      let params = {};
      switch (this.message.title) {
        case "price":
          this.tableDataPrice_pageinfo.currentPage = page;
          params = {
            page: this.tableDataPrice_pageinfo.currentPage,
            size: this.tableDataPrice_pageinfo.pageSize,
            room_id: this.messageRoomId,
          };
          this.$emit("income", params);
          break;
        case "log":
          this.tableDataLog_pageinfo.currentPage = page;
          params = {
            page: this.tableDataLog_pageinfo.currentPage,
            size: this.tableDataLog_pageinfo.pageSize,
            room_id: this.messageRoomId,
          };
          this.$emit("room_operate_log_api", params);
          break;
        case "reward":
          this.tableDataReward_pageinfo.currentPage = page;
          params = {
            page: this.tableDataReward_pageinfo.currentPage,
            size: this.tableDataReward_pageinfo.pageSize,
            room_id: this.messageRoomId,
          };
          this.$emit("room_gift_log", params);
          break;
        case "banned":
          this.tableDataBanned_pageinfo.currentPage = page;
          params = {
            page: this.tableDataBanned_pageinfo.currentPage,
            size: this.tableDataBanned_pageinfo.pageSize,
            room_id: this.messageRoomId,
          };
          this.$emit("kickout_log", params);
          break;
      }
    },
    onChangeSize(size) {
      let params = {};
      switch (this.message.title) {
        case "price":
          this.tableDataPrice_pageinfo.pageSize = size;
          params = {
            page: this.tableDataPrice_pageinfo.currentPage,
            size: this.tableDataPrice_pageinfo.pageSize,
            room_id: this.messageRoomId,
          };
          this.$emit("income", params);
          break;
        case "log":
          this.tableDataLog_pageinfo.pageSize = size;
          params = {
            page: this.tableDataLog_pageinfo.currentPage,
            size: this.tableDataLog_pageinfo.pageSize,
            room_id: this.messageRoomId,
          };
          this.$emit("room_operate_log_api", params);
          break;
        case "reward":
          this.tableDataReward_pageinfo.pageSize = size;
          params = {
            page: this.tableDataReward_pageinfo.currentPage,
            size: this.tableDataReward_pageinfo.pageSize,
            room_id: this.messageRoomId,
          };
          this.$emit("room_gift_log", params);
          break;
        case "banned":
          this.tableDataBanned_pageinfo.pageSize = size;
          params = {
            page: this.tableDataBanned_pageinfo.currentPage,
            size: this.tableDataBanned_pageinfo.pageSize,
            room_id: this.messageRoomId,
          };
          this.$emit("kickout_log", params);
          break;
      }
    },
    incomeStatistics(row) {
      this.loadingTime = true;
      this.gridData = [];
      console.log(row);
      this.flag = true;
      let params = {
        room_id: this.messageRoomId,
        day: row.day.split(" ")[0],
      };
      this.$api.income_day(params).then((res) => {
        console.log(res.data, "===分时统计");
        if (res.code == 200) {
          this.gridData = res.data;
          this.loadingTime = false;
        }
      });
    },
  },
};
</script>
<style lang='less' scoped>
.infinite-list {
  overflow: auto;
  width: 60vw;

  .infinite-list-item {
    border-bottom: 1px solid rgb(237, 237, 237);
    line-height: 30px;
    height: 30px;
    padding: 0 10px;
    margin-bottom: 5px;
    font-size: 22px;
    display: flex;
    justify-content: space-between;
  }
}

// 如果没有设置name为fade，则就写成v-enter-from等等，如果设置了name，就写设置的name
/* 设置持续时间和动画函数 */
.fade-enter-active,
.fade-leave-active {
  transition: all 1s ease;
}
.fade-enter,
.fade-leave-to {
  // transform: translateY(-50px);
  transform: scale(0.9);
  opacity: 0;
}
</style>